<template>
	<view class="btn-box df-c">
		<text @click="choseTime">{{date}}</text>
		<image src="@/static/team/expand_icon.png" mode="widthFix" class="btn-icon"></image>
	</view>
	<uni-calendar ref="calendarRef" class="uni-calendar--hook" :clear-date="true" :date="info.date"
		:insert="info.insert" :lunar="info.lunar" :startDate="info.startDate" :endDate="info.endDate"
		:range="info.range" @confirm="confirm"/>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits,
		toRefs
	} from 'vue';

	const props = defineProps({
		date: {
			typr: String,
			default: '加入时间'
		}
	})
	const {
		date
	} = toRefs(props)
	const emits = defineEmits(['getDate'])
	const calendarRef = ref()
	const showCalendar = false
	const info = ref({
		lunar: true,
		range: true,
		insert: false,
		selected: []
	})

	const choseTime = () => {
		calendarRef.value?.open()
	}
	const confirm = (e) => {
		console.log(e.fulldate, 'lll');
		emits('getDate', date.value)
	}
</script>

<style lang="scss" scoped>
	.btn-box {
		color: #999;
		font-size: 24rpx;

		&>.btn-icon {
			width: 20rpx;
			height: 12rpx;
			margin-left: 12rpx;
		}
	}
</style>